<template>
  <view class="body">
    <view class="dates">
      <view
        v-for="(item, index) of state.weekList"
        @tap="selectDate(index)"
        :key="index"
        :class="['data-item', state.activeDate == index ? 'on' : '']"
      >
        <view>{{ index == 1 ? '今日' : transformChinese(Number(item.day)) }}</view>
        <view class="date-num">{{ item.date }}</view>
        <view v-if="state.activeDate == index" class="arrow-down" />
      </view>
    </view>
    <view class="nodate" v-if="!state.haveData">
      <img class="img" src="https://ainengli.hzjrsw.com/jkhx/noData.png" alt="" />
      <view class="nodate_text">
        <text class="name">今日暂无推荐食谱</text>
      </view>
    </view>
    <view v-else class="recommend">
      <img
        class="recommend-bg"
        src="https://ainengli.hzjrsw.com/jkhx/weight/recommend-bg.png"
        alt=""
      />
      <view class="recommend-title">
        <img class="img-icon" src="https://ainengli.hzjrsw.com/jkhx/common/food-icon.png" alt="" />
        <text>今日食谱推荐</text>
      </view>
      <view class="flexs">
        <view class="flex-item first-item">
          <view class="item-name">食谱总热量</view>
          <view class="item-num"
            >{{ state.powerInfo.energy || 0 }}<text class="item-name">千卡</text></view
          >
        </view>
        <view class="cut-line" />
        <view class="flex-item">
          <view class="item-name">碳水</view>
          <view class="item-num"
            >{{ state.powerInfo.cho || 0 }}<text class="item-name">&nbsp;g</text></view
          >
        </view>
        <view class="flex-item">
          <view class="item-name">蛋白质</view>
          <view class="item-num"
            >{{ state.powerInfo.pro || 0 }}<text class="item-name">&nbsp;g</text></view
          >
        </view>
        <view class="flex-item">
          <view class="item-name">脂肪</view>
          <view class="item-num"
            >{{ state.powerInfo.fat || 0 }}<text class="item-name">&nbsp;g</text></view
          >
        </view>
      </view>
    </view>
    <view v-for="(item, index) of mealList" :key="index" class="box">
      <view v-if="item.normal && item.normal.length > 0" class="normal">
        <view class="title">
          <view class="line" />
          <text>{{ index == 0 ? '早餐' : index == 1 ? '午餐' : '晚餐' }}</text>
        </view>
        <view class="meal">
          <view v-for="(i, idx) of item.normal" :key="idx" class="meal-items">
            <view class="meal-name">{{ i.name }}</view>
            <view class="meal-components">
              <text v-for="(cop, cop_idx) of i.ingredients" :key="cop_idx">
                {{ cop.name + '*' + cop.amount
                }}{{ cop_idx + 1 < i.ingredients.length ? '，' : '' }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <view v-if="item.add && item.add.length > 0" class="normal add">
        <view class="title">
          <view class="line" />
          <text>{{ index == 0 ? '早加餐' : index == 1 ? '午加餐' : '晚加餐' }}</text>
        </view>
        <view class="meal">
          <view v-for="(j, i) of item.add" :key="i" class="meal-items">
            <view class="meal-name">{{ j.name }}</view>
            <view class="meal-components">
              <text v-for="(cop, cop_idx) of j.ingredients" :key="cop_idx">
                {{ cop.name + '*' + cop.amount
                }}{{ cop_idx + 1 < j.ingredients.length ? '，' : '' }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view @tap="recordFood" class="fixed">
      <button class="fix-btn">记录今日饮食</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { formatDate, transformChinese } from '@/utils/util'
import { ai_recommend_food } from '@/module/api/food'
import { onLoad, onShow } from '@dcloudio/uni-app'

const state = reactive({
  userInfo: {},
  weekList: [],
  powerInfo: {},
  activeDate: 1,
  haveData: false
})

const mealList = ref([
  {
    normal: [],
    add: []
  },
  {
    normal: [],
    add: []
  },
  {
    normal: [],
    add: []
  }
])

onShow(async () => {
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  await getTime()
  getRecommendFood()
})

const getRecommendFood = () => {
  state.powerInfo = {}
  mealList.value[0].normal = []
  mealList.value[0].add = []
  mealList.value[1].normal = []
  mealList.value[1].add = []
  mealList.value[2].normal = []
  mealList.value[2].add = []
  // 获取今日推荐饮食
  const params = {
    empi: state.userInfo.empi,
    recommendDate: state.weekList[state.activeDate].fDate
  }
  ai_recommend_food(params).then((res) => {
    if (res.data && res.data.itemContent) {
      state.haveData = true
      const foods = JSON.parse(res.data.itemContent)
      state.powerInfo = res.data
      if (foods.breakfast) {
        mealList.value[0].normal = foods.breakfast.food_items
        if (foods.breakfast_plus) {
          mealList.value[0].add = foods.breakfast_plus.food_items
        }
      }
      if (foods.lunch) {
        mealList.value[1].normal = foods.lunch.food_items
        if (foods.lunch_plus) {
          mealList.value[1].add = foods.lunch_plus.food_items
        }
      }
      if (foods.dinner) {
        mealList.value[2].normal = foods.dinner.food_items
        if (foods.dinner_plus) {
          mealList.value[2].add = foods.dinner_plus.food_items
        }
      }
    } else {
      state.haveData = false
    }
  })
}
const getTime = () => {
  state.weekList = []
  const today = new Date()
  const oneday = 86400000
  for (var i = 0; i < 7; i++) {
    if (i == 0) {
      const dayInfo = {
        date: new Date(today.getTime() - oneday).getDate(),
        day: new Date(today.getTime() - oneday).getDay(),
        fDate: formatDate(new Date(today.getTime() - oneday), 'yyyy-MM-dd')
      }
      state.weekList.push(dayInfo)
    } else if (i == 1) {
      const dayInfo = {
        date: today.getDate(),
        day: today.getDay(),
        fDate: formatDate(new Date(), 'yyyy-MM-dd')
      }
      state.weekList.push(dayInfo)
    } else {
      const dayInfo = {
        date: new Date(today.getTime() + (i - 1) * oneday).getDate(),
        day: new Date(today.getTime() + (i - 1) * oneday).getDay(),
        fDate: formatDate(new Date(today.getTime() + (i - 1) * oneday), 'yyyy-MM-dd')
      }
      state.weekList.push(dayInfo)
    }
  }
}

const selectDate = (index: number) => {
  state.activeDate = index
  getRecommendFood()
}

const recordFood = () => {
  uni.navigateTo({
    url: '/module/src/pages/food/dailyFood/index'
  })
}
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  height: 100%;
  padding: 34rpx 32rpx;
  padding-bottom: calc(144rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
  overflow: auto;

  .dates {
    box-sizing: border-box;
    width: 100%;
    padding-bottom: 40rpx;
    overflow-x: scroll;
    white-space: nowrap;

    .data-item {
      position: relative;
      display: inline-block;
      width: 112rpx;
      height: 102rpx;
      padding-top: 12rpx;
      margin-right: 16rpx;
      font-size: 28rpx;
      font-weight: 700;
      color: #222;
      text-align: center;
      background: #fff;
      border-radius: 12rpx;

      .date-num {
        margin-top: 12rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #666;
      }
    }

    .on {
      color: #fff;
      background: #00d1b6;

      .date-num {
        color: #fff;
      }

      .arrow-down {
        position: absolute;
        bottom: -12rpx;
        left: calc(50% - 12rpx);
        width: 0;
        height: 0;
        border-top: 12rpx solid #00d1b6;
        border-right: 12rpx solid transparent;
        border-left: 12rpx solid transparent;
      }
    }
  }

  .nodate {
    text-align: center;

    .img {
      display: inline-block;
      width: 320rpx;
      height: 240rpx;
      margin-top: 240rpx;
    }

    .nodate_text {
      .name {
        display: block;
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #666;
        text-align: center;
      }
    }
  }

  .recommend {
    position: relative;
    margin-bottom: 32rpx;

    .recommend-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 686rpx;
      height: 302rpx;
    }

    .recommend-title {
      position: relative;
      width: 100%;
      padding: 24rpx 32rpx;
      font-size: 34rpx;
      font-weight: 700;
      color: #693d14;

      .img-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 8rpx;
        transform: translateY(8rpx);
      }
    }

    .flexs {
      position: relative;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 204rpx;
      padding: 40rpx 32rpx;
      border-radius: 24rpx;

      .flex-item {
        width: 21%;
        text-align: center;

        .item-name {
          font-size: 28rpx;
          font-weight: 400;
          color: #666;
        }

        .item-num {
          margin-top: 24rpx;
          font-size: 40rpx;
          font-weight: 700;
          color: #222;
        }
      }

      .first-item {
        width: 34%;

        .item-num {
          margin-top: 16rpx;
          font-size: 48rpx;
        }
      }

      .cut-line {
        width: 1rpx;
        height: 102rpx;
        background: #e5e6eb;
      }
    }
  }

  .box {
    margin-bottom: 32rpx;
    overflow: hidden;
    background: #fff;
    border-radius: 24rpx;

    .normal {
      margin: 32rpx;

      .title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 24rpx;
        font-size: 36rpx;
        font-weight: 700;
        color: #222;

        .line {
          width: 8rpx;
          height: 36rpx;
          margin-right: 16rpx;
          background: #00d1b6;
          border-radius: 0 8rpx 8rpx 0;
        }
      }

      .meal {
        padding: 0 24rpx 24rpx;
        background: #fafafa;
        border-radius: 16rpx;

        .meal-items {
          overflow: hidden;

          .meal-name {
            margin: 24rpx 0 4rpx;
            font-size: 32rpx;
            font-weight: 700;
            color: #222;
          }

          .meal-components {
            width: 574rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #999;
          }
        }
      }
    }

    .add {
      padding-top: 24rpx;
      margin-top: 24rpx;
      border-top: 2rpx dashed #e5e6eb;
    }
  }

  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    display: flex;
    gap: 24rpx;
    justify-content: space-between;
    width: 100%;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background: #fff;

    .fix-btn {
      width: 100%;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      background: #00d1b6;
      border-radius: 44rpx;
    }
  }
}
</style>
